import React, {Component} from 'react';
import {Spin, Row, Col, Button} from 'antd';
import '../css/register.css';
import app from '../AppMethod';
import {order} from "../value";
import {config} from "../config";
import {ShowImg} from '../components/EditComponent';

class SearchOrder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {},
            loading: false
        }
    };

    render() {
        const {output_consumer_name, car_logistics_name, car_logistics_phone, car_check_num, output_real_package,
            output_real_parts, output_finish_photo,output_is_receive} = this.state.data;
        let num1 = 0;
        let num2 = 0;
        if (output_real_package != null) {
            num1 = Number(output_real_package);
        }
        if (output_real_parts != null) {
            num2 = Number(output_real_parts);
        }
        let all = num1 + num2;
        return (
            <div className="registerContainer">
                <Spin spinning={this.state.loading}>
                    <Row style={{backgroundColor: '#fff', padding: '10px 12px', margin: '10px'}}>
                        <Row style={{height: '30px', lineHeight: '30px'}}>
                            客户名：{output_consumer_name}
                        </Row>
                        <Row style={{height: '30px', lineHeight: '30px'}}>
                            托运部：{car_logistics_name}
                        </Row>
                        <Row style={{height: '30px', lineHeight: '30px'}}>
                            联系方式：{car_logistics_phone}
                        </Row>
                        <Row style={{height: '30px', lineHeight: '30px'}}>
                            托运单号：{car_check_num}
                        </Row>
                        <Row style={{height: '30px', lineHeight: '30px'}}>
                            总件数：{all}
                        </Row>
                        <Row>
                            {
                                !output_finish_photo ? '' :
                                    output_finish_photo.map((item, index) => {
                                        return (
                                            <ShowImg key={index} imgUrl={item}/>
                                        )
                                    })
                            }
                        </Row>
                        <Row style={{height: '30px', lineHeight: '30px', marginTop: 15}}>
                            <Col span={24} style={{textAlign: 'center'}}>
                                {
                                    output_is_receive==0?
                                        <Button type={'primary'} onClick={() => this.handleConfirm()}>确认收货</Button>
                                        :
                                        <Button type={'primary'} disabled onClick={() => this.handleConfirm()}>已确认收货</Button>
                                }
                            </Col>
                        </Row>
                    </Row>
                </Spin>
            </div>
        )
    };

    componentDidMount() {
        console.log(app.getData('openid'));
        this.handleGetOrderDetail();
    };

    /**
     * 获取订单详情
     */
    handleGetOrderDetail() {
        let output_num = app.getQueryString('output_num');
        this.setState({loading: true});
        app.post(order.EMPLOYEE_SEARCHOUTPUT, {output_num: output_num}).then((result) => {
            if (result.code === 1) {
                let data = result.data;
                let output_finish_photo = data.output_finish_photo;
                let imgData;
                if (!output_finish_photo) {
                    imgData = null;
                } else {
                    imgData = output_finish_photo.split(',');
                }
                let tempData = {
                    output_consumer_name: data.output_consumer_name,
                    car_logistics_name: data.car_logistics_name,
                    car_logistics_phone: data.car_logistics_phone,
                    car_check_num: data.car_check_num,
                    output_real_package: data.output_real_package,
                    output_real_parts: data.output_real_parts,
                    output_finish_photo: imgData,
                    output_is_receive:data.output_is_receive
                };
                this.setState({data: tempData, loading: false});
            } else {
                this.setState({data: {}, loading: false});
                app.alert('没有数据', 'error', 2);
            }
        })
    };

    /**
     * 处理确认收货事件
     */
    handleConfirm() {
        let customer_open_id = app.getQueryString('customer_open_id');
        let output_num = app.getQueryString('output_num');
        let data = {
            customer_open_id: customer_open_id,
            output_num: output_num
        };
        app.post(order.CONFIRM_RECEIVEOUTPUT, data).then((result) => {
            if (result.code === 1) {
                this.handleGetOrderDetail();
                app.alert('确认成功', 'success', 2);
            } else {
                app.alert('确认失败', 'error', 2);
            }
        })
    }
}

export default SearchOrder;